<!-- 三级分类，可返回树形结构的数组，存储到本地，再获取 -->
<template>
    <div>
        <!-- 三级分类 -->
        <el-card>
            <el-form :inline="true" :disabled="show==0?false:true">
                <el-form-item label="一级分类">
                    <el-select v-model="categoryStore.c1" @change="changeC1">
                        <el-option v-for="(cate, index) in categoryStore.c1Arr" :key="cate.id" :label="cate.name"
                            :value="cate.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级分类">
                    <el-select v-model="categoryStore.c2" @change="changeC2">
                        <el-option v-for="(cate, index) in categoryStore.c2Arr" :key="cate.id" :label="cate.name"
                            :value="cate.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="三级分类">
                    <el-select v-model="categoryStore.c3">
                        <el-option v-for="(cate, index) in categoryStore.c3Arr" :key="cate.id" :label="cate.name"
                            :value="cate.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-card>
        <!-- 不使用pinia -->
        <!-- <el-card>
            <el-form :inline="true">
                <el-form-item label="一级分类">
                    <el-select v-model="c1" @change="changeC1(c1)">
                        <el-option v-for="(cate, index) in c1Arr" :key="cate.id" :label="cate.name"
                            :value="cate.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级分类">
                    <el-select v-model="c2" @change="changeC2">
                        <el-option v-for="(cate, index) in c2Arr" :key="cate.id" :label="cate.name"
                            :value="cate.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="三级分类">
                    <el-select v-model="c3" @change="sendCategory(c1, c2, c3)">
                        <el-option v-for="(cate, index) in c3Arr" :key="cate.id" :label="cate.name"
                            :value="cate.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-card> -->
    </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import useCategoryStore from '@/store/modules/category'
defineProps(['show'])
let categoryStore = useCategoryStore();

// 获取一级分类
onMounted(() => {
    categoryStore.getC1();
})

// 一级分类change事件，获取二级分类
const changeC1 = () => {
    // 将第二、三级分类清空
    categoryStore.c2 = ''
    categoryStore.c2Arr = []
    // change只能在选中值发生变化时触发，清空数据不算(此处没有触发changeC2)
    categoryStore.c3 = ''
    categoryStore.c3Arr = []
    categoryStore.getC2(categoryStore.c1 as number);
}

// 第二级分类change事件，获取三级分类
const changeC2 = () => {
    // 将第三级分类清空
    categoryStore.c3 = ''
    categoryStore.c3Arr = []
    categoryStore.getC3(categoryStore.c2 as number);
}

// 不使用pinia的做法
// defineProps(['sendCategory'])
// import { onMounted, ref, watch } from 'vue'
// import type { CategoryResData } from '@/api/product/attr/type'
// import { reqC1, reqC2 } from '@/api/product/attr'
// let c1Arr = ref()
// let c2Arr = ref()
// let c3Arr = ref()
// let c1 = ref()
// let c2 = ref()
// let c3 = ref()

// onMounted(() => {
//     getC1();
// })
// // 获取一级分类
// const getC1 = async () => {
//     let result: CategoryResData = await reqC1();
//     if (result.code == 200)
//         c1Arr.value = result.data;
// }
// // 一级分类change事件，获取二级分类
// const changeC1 = async (c1: number) => {
//     // 将第二级分类清空
//     c2.value = ''
//     c2Arr.value = []
//     // 清空第三级分类
//     c3.value = ''
//     c3Arr.value = []
//     let result: CategoryResData = await reqC2(c1);
//     if (result.code == 200)
//         c2Arr.value = result.data;

//     clearSelect();
// }
// // 第二级分类change事件，获取三级分类
// const changeC2 = async (c2: number) => {
//     // 清空第三级分类
//     c3.value = ''
//     c3Arr.value = []
//     let result: CategoryResData = await reqC2(c2);
//     if (result.code == 200)
//         c3Arr.value = result.data;

//     clearSelect();
// }

// // 向父组件传递消息，清空父组件的table
// const emit = defineEmits(['clearSelect'])

// const clearSelect = () => {
//     emit('clearSelect', true);
// }
</script>

<style scoped></style>